<script setup>
import { ref, onMounted, watch } from 'vue'
import { usePopStore } from '@/stores'
import { storeToRefs } from 'pinia'
import NavComponent from '@/views/operation/fly-verify/component/nav-component.vue'
import Hls from 'hls.js'
import { stopOneMediaStreamServer, getVideoServer } from '@/api'
const popStore = usePopStore()
const { Jc, XY } = storeToRefs(popStore)
const navBar = ref('基本信息')
const navList = ref(['基本信息', '航线', '气象', '视频'])
const close = () => {
  Jc.value.showPop = false
  navBar.value = '基本信息'
  destoryVideo()
}

const dialogPosition = ref([0, 0])
watch(
  () => Jc.value,
  (newVal) => {
    if (newVal) {
      dialogPosition.value = XY.value
    }
  },
  {
    deep: true
  }
)

// 响应子组件点击tab
const clickNavBar = (item) => {
  if (navBar.value == item) {
    return
  }
  navBar.value = item
  if (item == '视频') {
    let url = `flv//preve/${Jc.value.popInfo.platformId}.m3u8`
    setupHls(url)
  }
}

const hangxianTypes = ref({
  0: '政务巡查',
  1: '物流航线',
  2: '旅游观光航线',
  3: '巡查航线',
  4: '载人通勤'
})

//视频播放
let player = ref(null)
let hls = null
const setupHls = (videoUrl) => {
  // 获取视频元素
  const video = document.getElementById('my-video')

  // 判断浏览器是否支持 Hls.js
  if (Hls.isSupported()) {
    hls = new Hls()

    // 绑定 m3u8 流地址
    hls.loadSource(videoUrl)

    // 将 HLS 流附加到 video 元素上
    hls.attachMedia(video)

    // 监听流媒体附加到视频
    hls.on(Hls.Events.MEDIA_ATTACHED, () => {
      console.log('Video is attached to HLS.js')
      video.play()
    })

    // 错误处理
    hls.on(Hls.Events.ERROR, (event, data) => {
      console.error('Error:', data)
    })
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // 对于 Safari 浏览器（原生支持 m3u8 格式）
    video.src = videoUrl
    video.addEventListener('loadedmetadata', () => {
      video.play()
    })
  } else {
    console.error('Your browser does not support HLS')
  }
}

const destoryVideo = () => {
  const video = document.getElementById('my-video')
  if (hls) {
    // 销毁 hls.js 实例，停止播放并释放资源
    hls.destroy()
    console.log('HLS player stopped')
  }
  // 直接暂停视频播放
  video.pause()
  video.src = '' // 清空视频源
  stopOneMediaStreamServer({ id: Jc.value.popInfo.platformId })
}
</script>
<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animate__animated  animate__fadeIn"
    leave-active-class="animate__animated animate__faster  animate__fadeOut"
  >
    <div
      class="AirspacePop"
      ref="currentDom"
      :style="
        dialogPosition[0] && dialogPosition[1]
          ? {
              left: dialogPosition[0] + 'px',
              top: dialogPosition[1] + 'px'
            }
          : ''
      "
      v-if="Jc.showPop"
    >
      <p class="title">
        <span>机库信息</span>
        <span @click="close"><img src="@img/pop/close_icon.png" alt="" /></span>
      </p>
      <div class="content">
        <NavComponent :navBar="navBar" :navList="navList" @clickNavBar="clickNavBar"></NavComponent>
        <p v-if="navBar === '基本信息'">
          <span>· 名称：{{ Jc.popInfo.name }}</span>
          <span>· 经度：{{ Jc.popInfo.lon }}</span>
          <span>· 纬度：{{ Jc.popInfo.lat }}</span>
          <span>· 当前状态：{{ Jc.popInfo.status ? '在线' : '离线' }}</span>
          <span>· 航线占用：{{ Jc.popInfo.skipLineLocked == 1 ? '占用' : '未占用' }}</span>
          <span>· 停靠无人机名称：{{ Jc.popInfo.latestParkDrone }}</span>
        </p>
        <div v-else-if="navBar === '航线'">
          <div class="table">
            <ul class="thead">
              <li>航线名称</li>
              <li>航线类型</li>
              <li>飞行公里</li>
              <li>巡飞面积</li>
              <!-- <li>建图面积</li> -->
            </ul>
            <ul class="tbody">
              <li v-for="(item, index) in Jc.popInfo.airRouteList" :key="index">
                <p class="name">
                  <el-tooltip effect="dark" :content="item.name" placement="top">
                    <span>{{ item.name }}</span>
                  </el-tooltip>
                </p>
                <p>
                  {{ hangxianTypes[item.airspaceType] }}
                </p>
                <p>{{ item.flyKilometer }}</p>
                <p>{{ item.flyArea }}</p>
              </li>
            </ul>
          </div>
        </div>
        <p v-else-if="navBar === '气象'">
          <span>· 温度：</span>
          <span>· 大气压：</span>
          <span>· 雨量：</span>
          <span>· 最小风速：</span>
          <span>· 最大风速：</span>
          <span>· 平均风速：</span>
          <span>· 湿度：</span>
        </p>
        <div v-show="navBar === '视频'">
          <div class="videobox">
            <video :autoplay="true" muted id="my-video"></video>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<style scoped lang="scss">
.AirspacePop {
  position: fixed;
  z-index: 9;
  top: 100px;
  right: 400px;
  width: 400px;
  height: 300px;
  background: url('@img/pop/airspace_bg.png');
  background-size: 100% 100%;

  .title {
    display: flex;
    padding: 20px 20px 10px 50px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;

    span:last-child {
      width: 18px;
      height: 18px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .content {
    height: calc(100% - 100px);
    padding: 10px;
    p {
      height: 100%;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #85b9cb;
    }
    .videobox {
      margin: 12px 20px;
      height: 160px;
      display: flex;
      justify-content: center;
      align-items: center;
      // background: rgba(0, 213, 255, 0.12);
      // box-shadow: inset 0px 0px 28px 0px rgba(0, 213, 255, 0.42);
      // border: 3px solid #2c8596;

      img {
        width: 37px;
        height: 37px;
      }

      video {
        width: 100%;
        height: 100%;
      }
    }
  }
  .table {
    width: 100%;
    padding: 0 20px;
    margin-top: -10px;
    .thead {
      width: 100%;
      height: 37px;
      display: flex;
      background: url('@img/infrastructure/table_header_bg.png');
      background-size: 100% 100%;

      li {
        flex: 1;
        line-height: 37px;
        text-align: center;
      }
    }

    .tbody {
      height: 150px;
      overflow-y: auto;

      li {
        display: flex;
        height: 37px;
        line-height: 37px;
        border-bottom: 1px solid #0f496c;

        &:nth-child(odd) {
          background-color: rgba(15, 73, 108, 0.3);
        }

        P {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          .riseLandPointType {
            width: 67px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: rgba(0, 213, 255, 0.25);
            border-radius: 2px;
            border: 1px solid #00d5ff;
          }
        }
      }
    }
  }
}

.name {
  width: 60px;
  span {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
